<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
<script>
        this:上下文,会根据执行环境变化而发生指向的改变.

    // 1.单独的this，指向的是window这个对象

    alert(this);
    // this -> window
    // 2.全局函数中的this

    function demo() {
      alert(this); // this -> window
  }
  demo();
    // 在严格模式下，this是undefined.

    function demo() {
       'use strict'; alert(this);
       // undefined
      }
      demo();
    // 3.函数调用的时候，前面加上new关键字

    // 所谓构造函数，就是通过这个函数生成一个新对象，这时，this就指向这个对象。

    function demo() {
       //alert(this);
      // this -> object this.testStr = 'this is a test';
  }
    let a = new

    demo();
    alert(a.testStr);
    // 'this is a test'
    // 4.用call与apply的方式调用函数

    function demo() {
      alert(this);
  }
    demo.call('abc');
    // abc
    demo.call(null);
    // this -> windowdemo.call(undefined);
    // this -> window
    // 5.定时器中的this，指向的是window

    setTimeout(function() {
       alert(this);
      // this -> window ，严格模式 也是指向window
  },500)
    // 6.元素绑定事件，事件触发后，执行的函数中的this，指向的是当前元素

    window.onload = function() {
       let $btn = document.getElementById('btn');
     $btn.onclick = function(){
       alert(this);
       // this -> 当前触发
      }
      }
    // 7.函数调用时如果绑定了bind，那么函数中的this指向了bind中绑定的元素

    window.onload = function() {
       let $btn = document.getElementById('btn');
     $btn.addEventListener('click',function() {
      alert(this);
      // window
  }.bind(window)
  )}
    // 8.对象中的方法，该方法被哪个对象调用了，那么方法中的this就指向该对象

    let name = 'finget'
    let obj = {
      name: 'FinGet',
     getName: function() {
       alert(this.name);
   }
  }
    obj.getName();
     // FinGet---------------------------分割线----------------------------
     let fn = obj.getName;fn();
     //finget this -> window
</script>
